<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :title="`${text}积分`"
    width="500px"
    @close="handleClose"
  >

    <el-form ref="postForm" :model="postForm" :rules="rules" label-position="left" label-width="120px">

      <el-form-item prop="points" label="积分数量">
        <el-input-number v-model="postForm.points" :min="0" style="width: 100%" size="small" />
      </el-form-item>

      <el-form-item :label="`${text}理由`" prop="refRemark">
        <el-input v-model="postForm.refRemark" :placeholder="`积分${text}理由，通过站内信通知用户！`" type="textarea" size="small" />
      </el-form-item>

    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button :loading="loading" type="primary" @click="handleGive">确 定</el-button>
    </div>

  </el-dialog>

</template>

<script>
import { incrPoints, subPoints } from '@/api/sys/points/points'

export default {
  name: 'PointsGiveDialog',
  components: { },
  props: {
    visible: { type: Boolean },
    userId: { type: String },
    opt: { type: Number }

  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      text: '积分操作',
      postForm: {
        points: 0
      },
      rules: {
        points: [{ required: true, message: '积分数量必须大于0！' }],
        refRemark: [{ required: true, message: '积分操作理由不能为空！' }]
      }
    }
  },

  watch: {

    // 检测查询变化
    userId: {
      handler() {
        this.postForm.userId = this.userId
      }
    },

    // 属性变化
    visible: {
      handler() {
        this.dialogVisible = this.visible
        this.postForm = { userId: this.userId }
      }
    },

    opt: {
      handler(val) {
        this.labelShow(val)
      }
    }
  },

  created() {
    this.dialogVisible = this.visible
    this.postForm.userId = this.userId
    this.labelShow(this.opt)
  },

  methods: {

    labelShow(val) {
      if (val === 1) {
        this.text = '赠送'
      } else {
        this.text = '扣减'
      }
    },

    handleClose() {
      this.$emit('update:visible', false)
      this.$emit('success')
    },

    // 增加
    handleIncr() {
      this.loading = true
      incrPoints(this.postForm).then(() => {
        this.$message({
          type: 'success',
          message: '积分发放成功!'
        })
        this.loading = false
        this.handleClose()
      }).catch(() => {
        this.loading = false
      })
    },

    // 增加
    handleSub() {
      this.loading = true
      subPoints(this.postForm).then(res => {
        this.$message({
          type: 'success',
          message: '积分扣减成功!'
        })
        this.loading = false
        this.handleClose()
      }).catch(() => {
        this.loading = false
      })
    },

    // 保存数据
    handleGive() {
      this.$refs.postForm.validate((valid) => {
        if (!valid) {
          return
        }

        if (this.opt === 1) {
          this.handleIncr()
        } else {
          this.handleSub()
        }
      })
    }

  }
}
</script>
